﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title></title>
		<meta charset="utf-8" />
		<script src="../js/digit.js"></script>
		<script src="js/tools.js"></script>
		<script type="text/javascript">
			function $$(id) {
				return document.getElementById(id);
			}
			window.onload = function() {
				var cnv = $$("canvas");
				var cxt = cnv.getContext("2d");
				

				setInterval(function() {
					
						cxt.clearRect(0, 0, cnv.width, cnv.height);
						var d = new Date();
						
						//h
						var h=d.getHours();
						var h1=Math.floor(h % 10);
						var h10=Math.floor(h / 10);						
						drawDigit(cxt,h10,0);
						drawDigit(cxt,h1,7);
						drawDigit(cxt,"colon",14);						
						1
						//m
						var m=d.getMinutes();
						var m1=Math.floor(m % 10);
						var m10=Math.floor(m / 10);						
						drawDigit(cxt,m10,18);
						drawDigit(cxt,m1,25);
						drawDigit(cxt,"colon",32);
						
						//h
						var s=d.getSeconds();
						var s1=Math.floor(s % 10);
						var s10=Math.floor(s / 10);						
						drawDigit(cxt,s10,36);
						drawDigit(cxt,s1,43);						
						
				}, 1000)
			}
		</script>
	</head>

	<body>
		<canvas id="canvas" width="1600" height="600" style="border:1px solid silver;"></canvas>
	</body>

</html>